// 实现标签页切换
function initSwitchTab() {
  let tabSession = document.querySelector('.tab .tab-session');
  let tabFriend = document.querySelector('.tab .tab-friend');
  let lists = document.querySelectorAll('.list');

  // 点击会话
  tabSession.onclick = function () {
    tabSession.style.backgroundImage = 'url(image/对话.png)';
    tabFriend.style.backgroundImage = 'url(image/用户2.png)';
    // 会话列表
    // 好友列表
    lists[0].classList = 'list';
    lists[1].classList = 'list hide';
  }

  // 点击好友
  tabFriend.onclick = function () {
    tabSession.style.backgroundImage = 'url(image/对话2.png)';
    tabFriend.style.backgroundImage = 'url(image/用户.png)';
    // 让好友列表显示，让会话列表隐藏起来
    lists[0].classList = 'list hide';
    lists[1].classList = 'list';
  }
}
// js函数调用
initSwitchTab();

////////////////////////////////////////////////////////////////////////////
// 页面加载时就要对数据进行获取了
function getAddFriendRequest() {
  $.ajax({
    type: 'get',
    url: 'getFrindRequest',
    success: function (body) {
      for (let item of body) {
        addFriendRequest(item.fromUserId, item.fromUserName, item.reason);
      }
    },
    error: function () {
      alert('加载添加好友列表失败！');
    }
  });
}

function addFriendRequest(fromUserId, fromUserName, reason) {
  let sessionList = document.querySelector('#session-list');
  let li = document.createElement('li');
  li.setAttribute('from-user-id', fromUserId);
  li.style = 'height: 100px';

  sessionList.appendChild(li);

  let h3 = document.createElement('h3');
  h3.innerHTML = fromUserName;
  let p = document.createElement('p');
  p.innerHTML = reason;
  let rowDiv = document.createElement('div');
  rowDiv.className = 'row';
  let buttonAccept = document.createElement('button');
  buttonAccept.innerHTML = '接受';
  console.log("addFriendRequest执行");
  buttonAccept.onclick = function () {
    $.ajax({
      type: 'get',
      url: 'acceptFriend?friendId=' + fromUserId,
      success: function () {
        alert("通过 " + fromUserName + " 的好友申请 处理成功!");
        // 刷新好友列表
        getFriendList();
        sessioanList.removeChild(li);
      },
      error: function () {
        alert("通过 " + fromUserName + " 的好友申请 处理失败!");
      }
    });
  }

  let buttonReject = document.createElement('button');
  buttonReject.innerHTML = '拒绝';
  buttonReject.onclick = function () {
    $.ajax({
      type: 'get',
      url: 'rejectFriend?friendId=' + fromUserId,
      success: function () {
        alert("拒绝" + fromUserName + "的好友申请处理成功！");
        sessionList.removeChild(li);
      },
      error: function () {
        alert("拒绝" + fromUserName + "的好友申请处理失败！");
      }
    });
  }

  li.appendChild(h3);
  li.appendChild(p);
  rowDiv.appendChild(buttonAccept);
  rowDiv.appendChild(buttonReject);
  li.appendChild(rowDiv);
  console.log("->", sessionList)
  sessionList.appendChild(li);
  // 置顶操作
  sessionList.insertBefore(li, sessionList.children[0]);
}


////////////////////////////////////////////////////////////////////////////
// 操作websocket
// let websocket = new WebSocket("ws://127.0.0.1:8888/WebSocketMessage");
let websocket = new WebSocket("ws://" + location.host + "/WebSocketMessage");

websocket.onopen = function () {
  console.log("websocket连接建立成功!");
}

websocket.onmessage = function (e) {
  console.log("websocket收到消息! " + e.data);
  // 收到的消息是json字符串，需要转换为js对象
  let resp = JSON.parse(e.data);
  if (resp.type == 'message') {
    // 处理消息响应
    handleMessage(resp);
  } else if (resp.type == 'addFriendRequest') {
    handlerAddFriend(resp);
  } else if (resp.type == 'acceptFriend') {
    handlerAcceptFriend(resp);
  } else {
    console.log("resp.type 不符合要求");
  }
}

websocket.onclose = function () {
  console.log("websocket连接关闭!");
}

websocket.onerror = function () {
  console.log("websocket连接异常!");
}

function handleMessage(resp) {
  // 1.根据响应的sessionId获取当前会话对应的li标签
  let curSessionLi = findSessionLi(resp.sessionId);
  if (curSessionLi == null) {
    // 创建一个li标签标识新的会话
    curSessionLi = document.createElement('li');
    curSessionLi.setAttribute('message-session-id', resp.sessionId);
    curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>' + '<p></p>';
    curSessionLi.onclick = function () {
      clickSession(curSessionLi);
    }
  }
  // 2.如果新的消息，显示到会话预览区域;如果消息太长了，就对消息进行截取 
  let p = curSessionLi.querySelector('p');
  p.innerHTML = resp.content;
  if (p.innerHTML.length > 10) {
    p.innerHTML = p.innerHTML.substring(0, 10) + '...';
  }
  // 3.将收到的消息会话，放到会话列表的最上面（消息置顶操作）
  let sessionListUL = document.querySelector('#session-list');
  sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
  // 4.当前消息处于被选中状态，则当前消息放在右侧消息列表中
  //   注意滚动消息条，保证新消息在最下面
  if (curSessionLi.className == 'selected') {
    let messageShowDiv = document.querySelector('.right .message-show');
    addMessage(messageShowDiv, resp);
    scrollBottom(messageShowDiv);
  }
}

function handlerAddFriend(resp) {
  // 在会话列表中新增⼀项, 表⽰添加好友请求. 
  addFriendRequest(resp.fromUserId, resp.fromUserName, resp.reason);
}

function handlerAcceptFriend(resp) {
  // 1. 刷新好友列表
  getFriendList();
  // 2. 弹框提⽰
  alert(resp.fromUserName + ' 已经通过你的好友申请!');
}

function findSessionLi(targetSessionId) {
  let sessionLis = document.querySelectorAll('#session-list li');
  for (let li of sessionLis) {
    let sessionId = li.getAttribute('message-session-id');
    if (sessionId == targetSessionId) {
      return li;
    }
  }
  // 没找到li，就是没有对话
  return null;
}

// 实现消息发送/接收功能
function initSendButton() {
  let sendButton = document.querySelector('.right .ctrl button');
  let messageInput = document.querySelector('.right .message-input');
  sendButton.onclick = function () {
    // a) 先针对输入框的内容做个简单判定. 比如输入框内容为空, 则啥都不干
    if (!messageInput.value) {
      // value 的值是 null 或者 '' 都会触发这个条件
      return;
    }
    // 凑请求数据
    // 先获取sessionId
    let selectedLi = document.querySelector('#session-list .selected');
    if (selectedLi == null) {
      return;
    }
    let sessionId = selectedLi.getAttribute('message-session-id');
    // 构造json
    let req = {
      type: 'message',
      sessionId: sessionId,
      content: messageInput.value
    };
    // 要将js对象转换为JSON对象
    req = JSON.stringify(req);
    console.log("[websocket]成功发送消息: " + req);
    websocket.send(req);
    // 发送成功，就要清空输入框
    messageInput.value = "";
  }
}

initSendButton();


////////////////////////////////////////////////////////////////////////////
// 从服务器获取用户登录数据
function getUserInfo() {
  $.ajax({
    type: 'get',
    url: 'userInfo',
    success: function (body) {
      if (body.userId && body.userId > 0) {
        let userDiv = document.querySelector('.main .left .user-list .user-item span');
        userDiv.innerHTML = body.username;
        userDiv.setAttribute("user-id", body.userId);
      } else {
        alert("当前用户未登录！");
        location.assign('login.html');
      }
    }
  });
}
getUserInfo();

$(document).ready(function () {
  // 假设用户名为 zhangsan，实际使用时可根据业务逻辑动态获取用户名
  const username = $('.username').text();
  $.ajax({
    url: '/getAvatar',
    method: 'GET',
    success: function (data) {
      if (data.avatarPath) {
        $('.user-avatar').attr('src', data.avatarPath);
      } else {
        console.log('未找到用户头像信息');
      }
    },
    error: function () {
      console.error('请求头像信息失败');
    }
  });
});

function getFriendList() {
  $.ajax({
    type: 'get',
    url: 'friendList',
    success: function (body) {
      // 1.清空好友列表的内容
      // 2.遍历body（对象数组），将响应结果家辉到当前friend-list中，重新获取好友列表
      let friendListUL = document.querySelector('#friend-list');
      friendListUL.innerHTML = "";
      for (let friend of body) {
        let li = document.createElement('li');
        let img = document.createElement('img');
        img.src = friend.avatarPath; // 假设后端返回的对象中有avatarUrl属性存储头像路径
        img.alt = '好友头像';
        img.classList.add('avatar');
        // li.innerHTML = '<h4>' + friend.friendName + '</h4>';
        let h4 = document.createElement('h4');
        h4.textContent = friend.friendName;
        li.appendChild(img);
        li.appendChild(h4);
        li.setAttribute('friend-id', friend.friendId);
        friendListUL.appendChild(li);
        li.onclick = function () {
          clickFriend(friend);
        }
      }
    },
    error: function () {
      alert("获取好友列表失败！");
    }
  });
}
getFriendList();

// 点击好友列表的好友，出发与该好友的会话
function clickFriend(friend) {
  //   先判断当前这个好友原本存不存在会话
  let sessionLi = findSessionByName(friend.friendName);
  let sessionListUL = document.querySelector('#session-list');
  if (sessionLi) {
    //   如果原本就有，就将这个会话设置为选中状态,置顶操作
    sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
    // 可以调用clickSession方法
    // 也可以
    sessionLi.click();
  } else {
    //   如果没有，就创建新会话
    sessionLi = document.createElement('li');
    sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
    sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
    sessionLi.onclick = function () {
      clickSession(sessionLi);
    }
    sessionLi.click();
    createSession(friend.friendId, sessionLi);
  }
  //   将标签页切换到会话列表，模拟鼠标点击
  let tabSession = document.querySelector('.tab .tab-session');
  tabSession.click();
}

function createSession(friendId, sessionLi) {
  $.ajax({
    type: 'post',
    url: 'session?toUserId=' + friendId,
    success: function (body) {
      console.log("会话创建成功！sessionId=" + body.sessionId);
      sessionLi.setAttribute('message-session-id', body.sessionId);
    },
    error: function () {
      console.log("创建会话失败！");
    }
  });
}

// 数组遍历，查找对应的元素
function findSessionByName(username) {
  let sessionLis = document.querySelectorAll('#session-list>li');
  for (let sessionli of sessionLis) {
    // 先获取li标签，再获取li标签里面的名字
    let h3 = sessionli.querySelector('h3');
    if (h3.innerHTML == username) {
      return sessionli;
    }
  }
  return null;
}

/////////////////////////////////////////////
// 获取会话列表
function getSessionList() {
  $.ajax({
    type: 'get',
    url: 'sessionList',
    success: function (body) {
      let sessionListUL = document.querySelector('#session-list');
      sessionListUL.innerHTML = '';
      for (let session of body) {
        if (session.lastMessage.length > 10) {
          session.lastMessage = session.lastMessage.substring(0, 10) + '...';
        }
        let li = document.createElement('li');
        li.setAttribute('message-session-id', session.sessionId);
        // 创建头像 img 元素并设置 src 属性
        let img = document.createElement('img');
        img.src = session.friends[0].avatarPath; // 假设后端返回的朋友对象中有 avatarPath 属性
        img.alt = '用户头像';
        img.classList.add('avatar');

        // 创建 message-box div 元素
        let messageBox = document.createElement('div');
        messageBox.classList.add('message-box');

        // 创建 h3 元素并设置文本内容
        let h3 = document.createElement('h3');
        h3.textContent = session.friends[0].friendName;

        // 创建 p 元素并设置文本内容
        let p = document.createElement('p');
        p.textContent = session.lastMessage;

        // 将 h3 和 p 元素添加到 message-box 中
        messageBox.appendChild(h3);
        messageBox.appendChild(p);

        // 将 img 和 message-box 元素添加到 li 中
        li.appendChild(img);
        li.appendChild(messageBox);

        sessionListUL.appendChild(li);

        // 点击li标签
        li.onclick = function () {
          clickSession(li);
        }
      }
      getAddFriendRequest();
    }
  });
}
getSessionList();

// 高亮点击的会话，并且获取历史消息
function clickSession(currentLi) {
  let allLis = document.querySelectorAll('#session-list>li');
  activeSession(allLis, currentLi);
  let sessionId = currentLi.getAttribute("message-session-id");
  getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
  // 遍历循环，取消未被选中的li标签的classname
  for (let li of allLis) {
    if (li == currentLi) {
      li.className = 'selected';
    } else {
      li.className = '';
    }
  }
}

function getHistoryMessage(sessionId) {
  console.log("获取历史消息，sessionId=" + sessionId);
  let titleDiv = document.querySelector('.right .title');
  titleDiv.innerHTML = "";
  let messageShowDiv = document.querySelector('.right .message-show');
  messageShowDiv.innerHTML = "";

  let selectedH3 = document.querySelector('#session-list .selected .message-box>h3');
  if (selectedH3) {
    titleDiv.innerHTML = selectedH3.innerHTML;
  }

  // 发送请求获取会话记录
  $.ajax({
    type: 'get',
    url: 'message?sessionId=' + sessionId,
    success: function (body) {
      for (let message of body) {
        addMessage(messageShowDiv, message);
      }
      scrollBottom(messageShowDiv);
    }
  });
}

function addMessage(messageShowDiv, message) {
  let messageDiv = document.createElement('div');
  let selfUsername = document.querySelector('.left .username').innerHTML;
  if (message.fromName == selfUsername) {
    // 消息靠右，自己的
    messageDiv.className = 'message message-right';
  } else {
    // 消息靠左，好友的
    messageDiv.className = 'message message-left';
  }
  messageDiv.innerHTML = '<div class="box">' + '<h4>' + message.fromName + '</h4>'
    + '<p>' + message.content + '</p>' + '</div>';
  messageShowDiv.appendChild(messageDiv);
}

function scrollBottom(elem) {
  // 可视高度
  let clientHeight = elem.offsetHeight;
  // 总高度
  let scrollHeight = elem.scrollHeight;

  elem.scrollTo(0, scrollHeight - clientHeight);
}

////////////////////////////////////////////////////////////////
// 查找好友
////////////////////////////////////////////////////////////////
function initFindFriend() {
  let search = document.querySelector('.left .search');
  let input = document.querySelector('.left .search>input');
  let button = document.querySelector('.left .search>button');

  button.onclick = function () {
    $.ajax({
      type: 'get',
      // 去除用户在输入框中输入内容的首尾空格
      url: '/findFriend?name=' + encodeURIComponent(input.value.trim()),
      success: function (body) {
        let titleDiv = document.querySelector('.right .title');
        titleDiv.innerHTML = '查找结果';
        let messageShowDiv = document.querySelector('.right .message-show');
        messageShowDiv.innerHTML = '';
        for (let friend of body) {
          let itemDiv = document.createElement('div');
          itemDiv.className = 'message-addFriend';
          // 头像
          let img = document.createElement('img');
          img.src = friend.avatarPath; // 假设后端返回的朋友对象中有 avatarPath 属性
          img.alt = '用户头像';
          img.classList.add('avatar');
          // 名字
          let span = document.createElement('span');
          span.innerHTML = friend.friendName;
          span.setAttribute('friend-id', friend.friendId);
          // 文本框
          let input = document.createElement('input');
          input.type = 'text';
          input.placeholder = '添加好友理由';
          // 添加按钮
          let button = document.createElement('button');
          button.innerHTML = '+';
          button.onclick = function () {
            sendAddFriend(friend.friendId, input.value);
          }
          itemDiv.appendChild(img);
          itemDiv.appendChild(span);
          itemDiv.appendChild(input);
          itemDiv.appendChild(button);
          messageShowDiv.appendChild(itemDiv);

          input.innerHTML = '';
        }
      },
      error: function () {
        alert('查找好友失败! name=' + input.value.trim());
      }
    });
  }
}
initFindFriend();

function sendAddFriend(friendId, reason) {
  $.ajax({
    type: 'get',
    url: 'addFriend?friendId=' + friendId + '&reason=' + encodeURIComponent(reason),
    success: function (body) {
      alert('添加好友请求已经发送！');
    },
    error: function () {
      alert('添加好友失败！');
    }
  });
}